<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./static/js/terminal/index.js"></script>
    <script type="text/javascript" src="./static/js/terminal/lru.js"></script>
    <script type="text/javascript" src="./static/js/terminal/canvas-xterm.js"></script>
    <style type="text/css">
      .term {
        color: #fff;
        background-color: #181818;
        font: 13px/1.5 Consolas, sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="term" class="term"></div>
    <div class="term" style="margin-top: 10px;">
      <canvas id="term-canvas"></canvas>
    </div>
    <script>
      var xterm = new AnsiTerminal(120, 80, 0);
      var canvasXTerm = new CanvasXTerm();
      var termNode = document.getElementById('term');
      var termCanvas = document.getElementById('term-canvas');
      var brush = termCanvas.getContext('2d');

      xterm.debug = false;
      xterm.newline_mode = true;

      function write(){
        [
          '  \u001b[36;1mgulp-cmd \u001b[0mconcat: \u001b[35mAssets/js/util/ztree/3.5.0/css/img/diy/8.png\u001b[39m start\u001b[36m +0ms\u001b[0m',
          '  \u001b[36;1mgulp-cmd \u001b[0mconcat: \u001b[35mAssets/js/util/ztree/3.5.0/css/img/diy/8.png\u001b[39m ...ok\u001b[36m +0ms\u001b[0m'
        ].forEach(function (line){
          xterm.write(line + ' ' + new Date().toISOString() + '\n');
        });

        xterm.write('\n  \033[4;41;32m红底下划线绿字\033[0m\n  ' + new Date().toISOString() + '\n\n');

        termNode.innerHTML = xterm.toString('html');

        canvasXTerm.draw(xterm.styles());

        termCanvas.width = canvasXTerm.canvas.width;
        termCanvas.height = canvasXTerm.canvas.height;

        brush.drawImage(canvasXTerm.canvas, 0, 0);

        setTimeout(write, 1000 - new Date().getMilliseconds());
      }

      write();
    </script>
  </body>
</html>